<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link rel="stylesheet" th:href="@{/layui/css/layui.css}">
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script  th:src="@{/js/jquery-3.6.0.min.js}"></script>
<body>
<!--<div onclick="window.location='/pages/back/shopCar/showMyCar'" id="myCarCount" style="cursor: pointer;text-align: center;border: solid lightgray 1px">-->
<!--    我的购物车-->
<!--    <span th:text="${session.carCount}"></span>-->
<!--</div>-->
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-col-md8 layui-col-md-offset2">
            <div style="display:flex">
                <div style="padding-top:35px;">
                    <img th:src="${goods.icon}" style="width: 200px;height: 200px"/>
                </div>
                <div style="padding-top: 20px;">
                    <h2 th:text="${goods.name}" style="font-weight: bold;margin:10px;margin-bottom:0;height: 67px"></h2>
                    <div style="margin: 10px"><span style="font-weight: bold">价格:</span><span th:text="${goods.price}" style="font-weight: bold;color: orangered;font-size: 20px;"></span></div>
                    <div style="font-weight: bold;margin: 10px;" th:text="'库存:'+${goods.inventory}" ></div>
                    <div style="font-weight: bold;margin: 10px" th:text="'店铺名:'+${goods.seller.name}" ></div>
                        <div style="display: flex">
                            <div id="add" style="width:40px;height:40px;background: lightgray;line-height:40px;text-align:center;font-size: 22px;font-weight: bold;user-select: none">+</div>
                            <input id="count" value="1" style="width: 80px;height: 36px" lay-verify="operationCount">
                            <div id="cut" style="width:40px;height:40px;background: lightgray;line-height:40px;text-align:center;font-size: 22px;font-weight: bold;user-select: none">-</div>
                            <div style="line-height:10px;color:white;font-weight: bold;background: red;cursor:pointer;padding:15px;height: 11px;width: 70px" id="addShopCar">加入购物车</div>
                            <div ><button class="layui-btn layui-btn-warm" style="height: 41px;" onclick="window.location='/buyer/goods/goodsList'">返回</button></div>
                        </div>
                </div>




            </div>
            <div th:utext="${goods.detail}" >

            </div>

        </div>



    </div>

</div>


<script th:inline="javascript" type="text/javascript">


    $(function (){

        layui.use(['table','form','layer'],function(){
            var table=layui.table;
            var layer=layui.layer;
            var form=layui.form;



                $("#addShopCar").click(function (){

                let shopCar={};
                let good=[[${goods}]]
                shopCar.sno=good.sno
                shopCar.gno=good.gno
                shopCar.count=$("#count").val();
                shopCar.totalPrice=good.price*shopCar.count;
                $.post('/buyer/shopcar/insertShopcar',shopCar,function (res){
                    if(res.res){
                        layer.msg(res.msg);
                        //$("#myCarCount").text(res.data)
                    }
                })
            })

            $("#add").click(function (){
                let count=$("#count").val();
                count++;
                $("#count").val(count);
            })

            $("#cut").click(function (){
                let count=$("#count").val();
                if(count>1){
                    count--;
                }
                $("#count").val(count);
            })

            $("#count").change(function (){
                let count=$("#count").val();
                if (count<=0)
                    count=1;
                $("#count").val(count);
            })

        })
    })
</script>

</body>

</html>